import React, { Component } from 'react'

export default class App extends Component {
    // 1、定义状态
    // 第一种定义状态方法
    // state={
    //     name:"海绵宝宝",
    //     text:"收藏",
    //     myshow:true
    // }
    // 第二种定义状态方法
    constructor() {
        // super()继承
        super()
        this.state = {
            name: "海绵宝宝",
            text: "收藏",
            myshow: true
        }
    }
    render() {
        return (
            <div>
                <h1>state状态---name:{this.state.name}</h1>
                {/* 2、不能直接修改state数据 ，通过this.setState间接修改更新*/}
                <button onClick={() => {
                    this.setState({
                         myshow: !this.state.myshow,
                         name:"海绵宝宝派大星"
                        })
                    if (this.state.myshow) {
                        console.log("收藏成功逻辑");
                    } else {
                        console.log("取消收藏逻辑");
                    }
                }}>
                    {/* 三目运算符 */}
                    {this.state.myshow ? "收藏" : "取消收藏"}
                </button>
            </div>
        )
    }
}
